<template>
  <div class="dialog">
    <el-dialog
      :visible.sync="dialogVisible"
      width="580px"
      append-to-body
      :modal="true"
      @close="closeDialog"
    >
      <span slot="title" class="dialog-title">{{ dialogTitle }}</span>
      <div class="dialogBody">
        <el-form ref="mealForm" :model="mealForm" size="mini">
          <div class="showType">
            <div v-if="!isEdit">
              <el-form-item style="width:300px;margin-bottom:50px" prop="bomName">
                <el-input v-model="mealForm.bomName" placeholder="物料名称"></el-input>
              </el-form-item>
              <el-form-item style="width:300px" prop="remaining">
                <el-input v-model="mealForm.remaining" placeholder="库存数量" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
              </el-form-item>
            </div>
            <div v-else>
              <p class="editName"><span>名称：</span><span>{{ mealForm.bomName }}</span></p>
              <p class="editName"><span>当前库存：</span><span>{{ mealForm.remaining }}套</span></p>
              <p class="editName">
                <span>增加库存：</span><el-input v-model="mealForm.addCount" placeholder="输入数量" oninput="value=value.replace(/[^\d]/g,'')" style="dispaly:inlin-block;width:200px"></el-input>
              </p>
              <p class="editName"><span>累计消耗：</span><span>{{ mealForm.grandTotal }}</span></p>
            </div>
            <div class="uploadImg">
              <el-form-item>
                <el-upload
                  :action="uploadUrl"
                  :class="{ disabled: uploadDisabled }"
                  list-type="picture-card"
                  :limit="1"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-success="uploadSuccess"
                  :on-change="changeUpload"
                  accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
                  :file-list="fileLists"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="preview" append-to-body :modal="false" title="图片查看">
                  <img width="100%" :src="mealForm.imgUrl" alt="" />
                </el-dialog>
              </el-form-item>
            </div>
          </div>
          <el-form-item label="" prop="intro">
            <el-input v-model="mealForm.intro" type="textarea" rows="6" placeholder="物料介绍"></el-input>
          </el-form-item>
          <el-form-item class="btn">
            <el-button type="primary" @click="submitForm('mealForm')">保存</el-button>
            <el-button @click="resetForm('mealForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { createBom, updateBom } from '@/api/bom';
import { mapGetters } from 'vuex';
export default {
  components: {},
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '新增物料',
      isEdit: false, // 是否编辑
      uploadUrl: process.env.VUE_APP_LOG_API + 'api/aliOSS/uploadfile', // 上传接口
      fileLists: [],
      preview: false,
      limitCount: 1, // 限制只能传一张
      uploadDisabled: false,
      mealForm: {
        imgUrl: null, // 查看图片
        bomName: null, // 物料名称
        remaining: null, // 库存数量
        intro: null, // 物料介绍
        unit: '套',
        addCount: 0, // 增加库存
        grandTotal: 0, // 累计用量
        bomId: null
      }
    };
  },
  computed: {
    ...mapGetters(['user'])
  },
  methods: {
    isShow(item = {}, isEdit = false) {
      this.dialogVisible = true;
      this.isEdit = isEdit;
      if (isEdit) {
        for (const key in this.mealForm) {
          this.mealForm[key] = item[key];
        }
        if (item.imgUrl) {
          this.uploadDisabled = true;
          this.fileLists.push({ url: item.imgUrl });
        }
        this.dialogTitle = '编辑物料';
      }
    },
    // 上传----------------------
    handleRemove(file, fileList) { // 删除文件
      this.uploadDisabled = fileList.length >= this.limitCount;
    },
    // 点击图片
    handlePictureCardPreview(file) {
      this.preview = true;
    },
    // 上传成功
    uploadSuccess(response, file, fileList) {
      this.mealForm.imgUrl = response.data.url;
    },
    // 文件改变时候
    changeUpload(file, fileList) {
      this.uploadDisabled = fileList.length >= this.limitCount;
    },
    // 关闭弹窗
    closeDialog() {
      this.resetForm();
    },
    // 取消
    resetForm(mealForm) {
      for (const key in this.mealForm) {
        this.mealForm[key] = null;
      }
      this.dialogTitle = '新增物料';
      this.fileLists = [];
      this.uploadDisabled = false;
      this.dialogVisible = false;
    },
    // 提交
    submitForm(mealForm) {
      this.$refs[mealForm].validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            updateBom(this.mealForm).then(res => {
              this.$notify.success('编辑成功');
              this.resetForm();
              this.$emit('addBomSuccess');
            }).catch(err => { console.log(err); });
          } else {
            createBom(this.mealForm).then(res => {
              this.$notify.success('新增成功');
              this.resetForm();
              this.$emit('addBomSuccess');
            }).catch(err => { console.log(err); });
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.btn{
  >>> .el-form-item__content{
    margin: 0 auto !important;
    text-align: center;
  }
}
.showType{
  position: relative;
  height: 160px;
  .editName{
    margin: 0;
    padding: 8px 0;
  }
  .uploadImg{
    position: absolute;
    top: 0;
    right: 0;
  }
}
.disabled >>> .el-upload--picture-card {
  display: none !important;
}
</style>
